<template>
  <div class="progress-card">
    <div class="progress-card-inner">
      <div class="progress-card-inner-pack">
        <slot>
          <div class="progress-card__title flex-row" style="margin-bottom: 4px; font-weight: bold">
            <slot name="title">
              <span :class="['flex-item', { clickable: $listeners['title-click'] }]" @click="$emit('title-click')">{{
                title
              }}</span>
            </slot>
            <div class="flex-not-shrink">
              <slot name="title-right"></slot>
            </div>
          </div>
          <div class="progress-card__body">
            <div
              v-if="$scopedSlots['top-left'] || $scopedSlots['top-right']"
              class="flex-row"
              style="margin-bottom: 4px">
              <div class="flex-item">
                <slot name="top-left"></slot>
              </div>
              <div class="flex-item" style="text-align: right">
                <slot name="top-right"></slot>
              </div>
            </div>
            <ElProgress
              v-if="progressBar"
              :text-inside="true"
              :color="color"
              :format="_ => ''"
              :stroke-width="10"
              :percentage="percentage" />
            <div v-if="$scopedSlots['bottom-left'] || $scopedSlots['bottom-right']" class="flex-row">
              <div class="flex-item">
                <slot name="bottom-left"></slot>
              </div>
              <div class="flex-item" style="text-align: right">
                <slot name="bottom-right"></slot>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ProgressCard',
    props: {
      color: {
        type: String,
        default: '#02bd6e'
      },
      title: {
        type: String,
        default: '标题'
      },
      percentage: {
        type: Number,
        default: 0
      },
      progressBar: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

<style lang="scss">
  .progress-card {
    @include flex-column;
    align-items: center;
    justify-content: center;
    margin: 5px;
    padding: 0 10px;
    border: 1px solid #ebeef5;
    border-top: 4px solid #e0e2e8;
    border-radius: 4px;

    .progress-card-inner {
      @include flex-column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      // background-color: #f4f4f4;
      // padding: 4px 20px;
      border-radius: 2px;
    }

    .progress-card-inner-pack {
      width: 100%;
    }
  }

  .progress-card + .progress-card {
    margin-top: 5px;
  }
</style>
